<template>
  <div
    class="subnav"
    v-if="$store.state.rule === 100">
    <el-menu
      default-active="3"
      style="height:100%;"
      :collapse="collapseFlag">
      <el-menu-item
        index="0"
        @click="isCollapse()">
        <i v-bind:class="collapseIcon"></i>
        <span slot="title">收起</span>
      </el-menu-item>
      <el-menu-item
        index="1"
        @click="routerLink('DiaryEditView')">
        <i class="el-icon-document"></i>
        <span slot="title">今日日报</span>
      </el-menu-item>
      <el-menu-item
        index="2"
        @click="routerLink('DiaryRefillView')">
        <i class="el-icon-plus"></i>
        <span slot="title">日报补写</span>
      </el-menu-item>
      <el-menu-item
        index="3"
        @click="routerLink('DiaryDisplayView')">
        <i class="el-icon-search"></i>
        <span slot="title">日报浏览</span>
      </el-menu-item>
      <el-menu-item
        index="4"
        @click="routerLink('StatisticView')">
        <i class="el-icon-document"></i>
        <span slot="title">日报统计</span>
      </el-menu-item>
    </el-menu>
    <div v-if="collapseFlag === false" style="position:fixed;bottom:50px;margin-left: 5px">
      <h4 style="margin-bottom:10px;margin-left:5px;">PowerBy:</h4>
      <el-button
        type="text"
        style="margin-left:20px;"
        onClick="window.open('https://cn.vuejs.org/')">
        Vue.js
      </el-button>
      <br/>
      <el-button
        type="text"
        style="margin-left:20px;"
        onClick="window.open('https://laravel.com/')">
        Laravel
      </el-button>
      <h4 style="margin-bottom:10px;margin-left:5px;">By:</h4>
      <el-popover
        ref="authorInfo"
        placement="right"
        width="400"
        trigger="click">
        <div>
          <span style="font-size: 18px">博客：</span>
          <el-button
            type="text"
            onClick="window.open('http://blog.csdn.net/zjiang1994')">
            http://blog.csdn.net/zjiang1994
          </el-button>
          <br>
          <span style="font-size: 18px">邮箱：</span>&nbsp;jiangzhen@clew123.xyz
          <br>
          <span style="font-size: 18px">微信:</span>&nbsp;&nbsp;&nbsp;&nbsp;zjiang1_12
          <br>
          <img
            style="width:150px;margin-left:50px;"
            src="/static/img/wx.png"
            alt="微信"/>
        </div>
      </el-popover>
      <el-button
        type="text"
        style="margin-left:20px;"
        v-popover:authorInfo>
        JiangZhen
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      collapseFlag: false,
      collapseIcon: 'el-icon-d-arrow-left',
      showAuthor: false
    }
  },
  methods: {
    isCollapse () {
      if (this.collapseFlag) {
        this.collapseFlag = false
        this.collapseIcon = 'el-icon-d-arrow-left'
      } else {
        this.collapseFlag = true
        this.collapseIcon = 'el-icon-d-arrow-right'
      }
    },
    routerLink (viewName) {
      if (viewName === 'DiaryEditView') {
        this.$store.commit('setDiaryFormData', {type: 'add'})
      }
      this.$router.push({name: viewName})
    }
  }
}
</script>
<style scoped>
.subnav {
  text-align: left;
  height: 100%;
}
.el-menu {
  background: #EEF6F3;
  height: 100%;
}
.el-menu-item {
  background: #EEF6F3;
  line-height:40px;
}
</style>